<template>
  <div class="nav-manage-container">
    <!-- 查询表单 -->
    <el-card class="search-form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="导航名称：">
          <el-input style="width: 300px;" v-model="searchForm.name" placeholder="请输入导航名称" />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select style="width: 300px;" v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮和数据表格 -->
    <el-card class="table-container">
      <content-header title="导航管理"></content-header>
      <div class="table-header">
        <el-button @click="handleDetail" :icon="CopyOutlined">详情</el-button>
        <el-button type="primary" @click="handleAdd(-1)" :icon="PlusOutlined">新增根导航</el-button>
        <el-button @click="handleEdit" :icon="EditOutlined">编辑</el-button>
        <el-button type="danger" @click="handleDelete" :icon="DeleteOutlined">删除</el-button>
      </div>

      <el-table :data="tableData" border style="width: 100%" row-key="ID" lazy :load="load" :key="tableKey"
        :tree-props="{ children: 'CHILDREN', hasChildren: 'HAS_CHILDREN' }">
        <el-table-column type="selection" width="45" />
        <el-table-column prop="NAV_NAME" label="导航名称" width="240" />
        <el-table-column prop="NAV_ICON" label="图标" width="130" align="center">
          <template #default="scope">
            <component :is="scope.row.NAV_ICON" />
          </template>
        </el-table-column>
        <el-table-column prop="ENABLED_FLAG" label="是否启用" width="200" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.ENABLED_FLAG" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="SORT_NUM" label="排序号" width="150"/>
        <el-table-column prop="NAV_PATH" label="导航路径" />
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleAdd(scope.row.ID)" :icon="PlusOutlined">新增子导航</el-button>
            <el-button size="small" @click="handleEdit(scope.row)" :icon="EditOutlined">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)" :icon="DeleteOutlined">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination" :current-page="pagination.current" :page-size="pagination.size"
        :total="pagination.total" @current-change="handlePageChange" layout="total, prev, pager, next, jumper" />
    </el-card>
  </div>
  <data-dialog ref="dialogRef" :refreshData="handleSearch"></data-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import request from '../../../utils/request';
import DataDialog from './components/DataDialog.vue';
import { type DialogData } from './components/DataDialog.vue';
import { PlusOutlined, EditOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';

interface Nav {
  ID: number
  NAV_NAME: string
  NAV_PATH: string
  NAV_ICON: string
  HAS_CHILDREN?: boolean
  CHILDREN?: Nav[]
}

interface pagination {
  current: number
  size: number
  total: number
}

// 查询表单数据
const searchForm = ref({
  name: '',
  status: ''
});

// 表格数据
const tableData = ref([])
const tableKey = ref(0)

// 分页数据
  const pagination = ref<pagination>({
    current: 1,
    size: 10,
    total: 0
  });

// 查询方法
const handleSearch = () => {
  let filters = []
  if (searchForm.value.name) {
    filters.push({
      FIELD_NAME: 'NAV_NAME',
      OPERATION_TYPE: 'LIKE',
      FIELD_VALUE: searchForm.value.name,
      JOIN_TYPE: 'AND'
    })
  } else if (searchForm.value.status) {
    filters.push({
      FIELD_NAME: 'ENABLED_FLAG',
      OPERATION_TYPE: '=',
      FIELD_VALUE: searchForm.value.status,
      JOIN_TYPE: 'AND'
    })
  }
  request.post('/nav/queryPage', {
    PAGE_NUM: 1,
    PAGE_SIZE: 10,
    FILTERS: filters
  }).then((res: HttpResult) => {
    const data: any = res.data
    tableData.value = data.records
    pagination.value = {
      current: data.current,
      size: data.size,
      total: data.total
    }
    tableKey.value++
  })
};

const load = (
  row: Nav,
  treeNode: unknown,
  resolve: (data: Nav[]) => void
) => {
  request.get('/nav/queryChildren', {
    params: {
      parentId: row.ID
    }
  }).then((res: HttpResult) => {
    resolve(res.data as Nav[])
  })
}

// 重置查询
const resetSearch = () => {
  searchForm.value = {
    name: '',
    status: ''
  };
  handleSearch();
};

// 分页变化
const handlePageChange = (current: number) => {
  pagination.value.current = current;
  handleSearch();
};

const dialogRef = ref()

// 新增
const handleAdd = (parentId: number = -1) => {
  dialogRef.value.show('add', {
    NAV_NAME: '',
    NAV_PATH: '',
    NAV_ICON: '',
    PARENT_ID: parentId,
    PLATFORM_FLAG: false,
    ENABLED_FLAG: true,
  })
};

// 详情
const handleDetail = () => {
  console.log('详情');
};

// 编辑
const handleEdit = (row: any) => {
  console.log('编辑', row);
};

// 删除
const handleDelete = (row: any) => {
  console.log('删除', row);
};

onMounted(() => {
  handleSearch();
})
</script>

<style lang="less" scoped>
.nav-manage-container {
  padding: 5px;

  .search-form {
    margin-bottom: 20px;
  }

  .table-header {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
